<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./utils/flexible.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="icon" href="assets/images/facicon.ico" type="image/x-icon" />
</head>
<style>
    * {
        margin: 0%;
        padding: 0%;
    }

    #header {
        height: 50px;
        background-color: red;
        padding: 5px;
        text-align: center;
        position: relative;
    }

    #header .back {
        font-size: 20px;
        color: #ffffff;
        position: absolute;
        left: .2667rem;
        top: 20%;
    }

    #header .back img {
        width: 1.0667rem;
        background-color: #ffffff;
    }

    #header>h4 {
        display: inline-block;
        text-align: center;
        font-size: 20px;
        color: #ffffff;
        padding-left: 30px;
        margin: .6667rem 0;
    }

    #header .back {
        display: block;
    }

    #header .app {
        position: absolute;
        right: .2667rem;
        top: 20%;
        padding: 7px;
    }

    #header .app img {
        width: .9333rem;
    }

    .propmpt {
        font-size: 12px;
        color: #999;
        margin: 8px 0;
        text-align: center;
    }

    .dv1 {
        font: 1rem/1rem "";
        margin-bottom: 1.0667rem;
        color: gray;
    }

    #container {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    #container>div {
        margin: .2667rem 0rem;
        width: 9.6rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    #container>div>img {
        width: 2.6667rem;
        height: 2.1333rem;
    }

    #container>div>.item1 {
        width: 6.88rem;
        height: 2.56rem;
    }

    #container>div>.item2 {
        margin-left: 2.6667rem;
        line-height: .5333rem;
        color: rgb(255, 95, 3);
    }

    .slideshow {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgb(5, 4, 4, 0.5);
        display: none;
    }

    .slideshow>div {
        width: 8rem;
        height: 4.8rem;
        display: flex;
        justify-content: space-between;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;

    }

    .slideshow>div>button {
        height: 2.1333rem;
        line-height: 2.1333rem;
        font-size: 1.6rem;
        color: rgba(255, 255, 255, 0.5);
        background: rgb(0, 0, 0, 0.5);
        position: relative;
        top: 25%;
    }

    .slideshow>div>div {
        width: 4.8rem;
        height: 4.8rem;
        overflow: hidden;
    }

    .slideshow>div>p {
        position: absolute;
        right: 1.6rem;
        top: 0;
        width: .6667rem;
        height: .6667rem;
        font-size: .5333rem;
        background: rgb(0, 0, 0, 0.5);
        text-align: center;
    }


    .slideshow>div>div>.shade {
        height: 4.8rem;
    }

    .slideshow>div>div>.shade>img {
        width: 4.8rem;
        height: 4.8rem;
        position: relative;
    }
</style>

<body>
    <header id="header">
        <a href="./index.html" class="back fl"><img src="./assets/images/back.png" alt=""></a>
        <h4>优惠券</h4>
        <div class="app fr">
            <a href="">
                <img src="./assets/images/app.png" alt="">
            </a>
        </div>
    </header>

    <div class="propmpt">
        --点餐前出示手机中的优惠券，即可享受优惠--
    </div>

    <div id="container">

    </div>

    <div class="slideshow">
        <div>
            <button class="button1">&lt;</button>
            <div>
                <div class="shade"></div>s
            </div>
            <button class="button2">&gt;</button>
            <p class="x">X</p>
        </div>
    </div>

    <section id="footer">
        <div class="more">
            <a href="">
                更多优惠信息&gt;&gt;
            </a>
        </div>
        <div class="chart clearfix">
            <span class="chart_in fl">品牌排行</span>
            <span class="more fr">
                <img src="./assets/images/youjian.png" alt="">
            </span>
        </div>
        <div class="login">
            <div class="container">
                <div class="row">
                    <a href="">
                        <div class="col-xs-3">登入</div>
                    </a>
                    <a href="">
                        <div class="col-xs-4">注册</div>
                    </a>
                    <a href="">
                        <div class="col-xs-5">返回顶部</div>
                    </a>
                    <span></span>
                </div>
            </div>
            <div class="content_b">
                <p>
                    <a href="#">
                        手机APP下载
                    </a>
                    <a href="#">
                        万锋智慧商城手机版
                    </a>
                    -- 掌上比价平台
                </p>
                <p>
                    chst.vip:8081/crm </p>
            </div>
        </div>
    </section>
</body>

</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    let container = document.querySelector("#container")
    var i = location.href
    let reg = /(?<=\?).*/;
    let r = i.match(reg);
    let id = decodeURI(r)
    let obj = {};
    let itemArr = id.split('=');
    obj[itemArr[0]] = itemArr[1]

    fetch(`http://chst.vip:1234/api/getcouponproduct?couponid=${obj.id}`
    )
        .then(body => body.json())
        .then(res => {
            console.log(res)
            let el = ""
            let el3 = ""
            let il = 0

            slength = res.result.length
            console.log(slength)
            res.result.forEach(item => {
                il++
                el += `<div id="${il}">
                                ${item.couponProductImg}
                            <div class="item1"> 
                                <p>${item.couponProductName}</p>
                                <p>${item.couponProductPrice}</p>
                            </div>
                            <div class="item2"> ${item.couponProductTime}
                            </div>
                        </div>
                    `
                el3 += `${item.couponProductImg}`
            })
            container.innerHTML = el;
            $('.slideshow>div>div>.shade').html(el3)
            $('.slideshow>div>div>.shade').css('width', slength * 180)
            slideshow(slength)

        })

    function slideshow(a) {
        let d = 0
        bled(d, a)
        display(a)

        function cli(i, a) {
            $(".slideshow>div>.button1").click(function (a) {
                i--
                var l = (i) * 180

                $('.slideshow>div>div>.shade>img').stop().animate({ right: l }, 500)
                bled(i, a)
            })
            $(".slideshow>div>.button2").click(function () {
                i++
                var l = (i) * 180
                // console.log(l)
                $('.slideshow>div>div>.shade>img').stop().animate({ right: l }, 500)
                bled(i, a)
            })
        }

        function bled(i, a) {
            if (i === 0) {
                $(".slideshow>div>.button1").attr("disabled", "true")
            } else if (i > 0 && i > (i - 1) && i !== (a - 1)) {
                $(".slideshow>div>.button1").removeAttr("disabled")
                $(".slideshow>div>.button2").removeAttr("disabled")
            }
            else if (i == (a - 1)) {
                $(".slideshow>div>.button1").removeAttr("disabled")
                $(".slideshow>div>.button2").attr("disabled", "true")
            }
        }

        function display(a) {
            $("#container>div").click(function () {
                // $('.slideshow').css('display', "block")
                $('.slideshow').slideDown()
                d = 0
                // console.log(this.id)
                d = Number((this.id - 1) * 180)
                $('.slideshow>div>div>.shade>img').stop().animate({ right: d }, 0)
                let i = (d / 180)
                // let a=(d/180)
                // console.log(i)
                bled(i, a)
                cli(i, a)

            })
            $(".slideshow>div>p").click(function () {
                // $('.slideshow').css('display', "none")
                $('.slideshow').slideUp()
                d = 0
            })
        }
    }

</script>